<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<jsp:include page="_import.jsp"/>

<style type="text/css">
body{
	background-color: #444 !important;
	color:#666;
}
.login-box{
	background-color:#fff;
}
.login-box-form{
	margin-top:5px;
	margin-bottom:10px;
	background-color:#F8F8F8;
}
.logo{
	margin-right:10px;
	height:50px;
}
.company{
	font-size:20px;
	line-height:50px;
}
.user-platform{
	margin:40px 20px 0 0;
	font-size:13px;
}
.form-signin{
	padding:20px 35px 20px 20px;
}
.copyright{
	color:#999;
}
.copyright div{
	text-align:center;
}
#img-code{
	cursor:pointer;
}
</style>

</head>

<body>
	<div class="container" style="margin-top:5%;">
		<div class="span8 offset2 login-box">
			<div class="row-fluid">
				<div class="span6" style="padding:10px;">
					<img src="<c:url value="${logoPath}"/>" class="pull-left logo"/>
					<div class="pull-left company"></div>
				</div>
				<div class="span6">
					<div class="pull-right user-platform">办公系统 <i class="icon-caret-right"></i></div>
				</div>
			</div>
			
		</div>
        <div class="span8 offset2 login-box login-box-form">
            <div class="row-fluid">
            	<div class="span5">
            		<img class="hidden-480" alt="" src="<c:url value="/static/img/ponser.gif"/>">
            	</div>
            	
            	<div class="span7">
            		<form class="form-signin" action="<c:url value="/j_spring_security_check"/>" method="post">
            			<c:if test="${messageError!=null || SPRING_SECURITY_LAST_EXCEPTION!=null}">
            				<div class="alert alert-error">${messageError}<br/>${SPRING_SECURITY_LAST_EXCEPTION}<%--<c:url value="/auth/login.html"/>--%></div>
            			</c:if>
            		
	            		<div class="row-fluid">
							<div class="span12"> 
			            		<div class="control-group">
									<label class="control-label">用户名</label>
									<div class="controls">
										<div class="input-icon left">
											<i class="icon-user"></i>
											<input type="text" name="username" value="${username==null?'kenliang':username}" placeholder="用户名" class="m-wrap span12">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="row-fluid">
							<div class="span12">
								<div class="control-group">
									<label class="control-label">密码</label>
									<div class="controls">
										<div class="input-icon left">
											<i class="icon-lock"></i>
											<input type="password" name="password" value="kenliang" placeholder="密码" class="m-wrap span12">
										</div>
									</div>
								</div>
							</div>
						</div>
						
						<div class="row-fluid">
							<div class="span6">
								<div class="control-group">
									<label class="control-label">验证码</label>
									<div class="controls">
											<div class="input-icon left">
												<i class="icon-info-sign"></i>
												<input type="text" id="authCode" name="authCode" placeholder="验证码" class="m-wrap span12">
											</div>
									</div>
								</div>
							</div>
							<div class="span6">
								<div class="control-group">
									<label class="control-label">&nbsp;</label>
									<div class="controls">
										
										<img id="img-code" alt="验证码" src="<c:url value="/auth/code.html"/>" title="刷新验证码" data-placement="right"/>
									</div>
								</div>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label"></label>
							<div class="controls">
								<button type="button" class="btn green signin">登&nbsp;录 <i class="m-icon-swapright m-icon-white"></i></button>
							</div>
						</div>
					</form>
            	
            	</div>
            </div>
    	</div>
    	<div class="span8 offset2 copyright">
    		<div>Copyright @ 2017-2027  kenlliang有限公司 版权所有</div>
        	<div>©2014  京ICP证450173号</div>
    	</div>
    </div>
<script type="text/javascript">
function show_alert(msg){
	var $alert = $(".alert");
	if($alert.length>0){
		$alert.html(msg);
	}else{
		$(".form-signin").prepend("<div class='alert alert-error'>"+msg+"</div>");
	}
}
function isChecked(){
	if(!$("input[name=username]").val()){
		show_alert("用户不能为空");
		return false;
	}
	if(!$("input[name=password]").val()){
		show_alert("密码不能为空");
		return false;
	}
	if(!$("input[name=authCode]").val()){
		show_alert("验证码不能为空");
		return false;
	}
	return true;
}

function signin(){
	if(isChecked())
		$(".form-signin").submit();
}

function enter_signin(evn){
	if(evn.keyCode == 13){
		signin();
	}
}

function changeImg(){
	var imgSrc = $("#img-code");
	var src = imgSrc.attr("src");
	imgSrc.attr("src",chgUrl(src));
}

function chgUrl(url) { 
        var timestamp = (new Date()).valueOf(); 
        var v_index = url.indexOf('.');
        var v_substr = url.substring(v_index, url.length);
        v_index += v_substr.length;
        url = url.substring(0, v_index); 
        if ((url.indexOf("&") >= 0)) { 
            url = url + "×tamp=" + timestamp; 
        } else { 
            url = url + "?timestamp=" + timestamp; 
        } 
        return url; 
}

$(document).ready(function(){
	$(".signin").bind("click", signin);
	$("#img-code").bind("click", changeImg);
	$("input[name=password]").bind("keyup", enter_signin);
	$("input[name=authCode]").bind("keyup", enter_signin);
	
	$("#img-code").tooltip();
	
});
</script>
</body>
</html>